<template>
  <el-card class="process-card">
    <template #header>
      <div class="flex">
        <el-badge :value="process_queue.length" class="item" :type="badge_type">
          <div class="p-2 shadow-md rounded-xl">{{ header }}</div>
        </el-badge>
      </div>
    </template>
    <el-table :data="process_queue" style="width: 100%">
      <el-table-column
        prop="process_num"
        label="序号"
        width="180"
        v-if="need_num"
      >
      </el-table-column>
      <el-table-column prop="process_name" label="标识符" width="180">
      </el-table-column>
      <el-table-column prop="process_time" label="时间片数" width="180">
      </el-table-column>
      <el-table-column prop="process_priority" label="优先级" width="180">
      </el-table-column>
      <el-table-column
        v-if="need_ratio"
        prop="process_response_ratio"
        label="响应比"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="process_status" label="运行进度">
        <template #default="scope">
          <el-progress
            :color="customColors"
            :text-inside="true"
            :stroke-width="26"
            :percentage="scope.row.process_progress"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :type="getStatusTag(scope.row.process_status)">{{
            scope.row.process_status
          }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  props: ['process_queue', 'header', 'badge_type', 'need_num', 'need_ratio'],
  data() {
    return {
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],
    }
  },
  methods: {
    getStatusTag(status) {
      let tag
      switch (status) {
        case '就绪':
          tag = ''
          break
        case '执行':
          tag = 'success'
          break
        case '阻塞':
          tag = 'warning'
          break
        case '终止':
          tag = 'danger'
          break
        default:
          break
      }
      return tag
    },
  },
}
</script>

<style scoped>
.process-card {
  margin-bottom: 1vh;
}
</style>
